import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Unlock from './pages/Unlock';
import Resource from './pages/Resource';
import { ConfigProvider, Layout, theme } from "antd";
import HeaderBar from "./components/HeaderBar";
import zhCN from 'antd/locale/zh_CN';

const App = () => {
  return (
    <ConfigProvider locale={zhCN} theme={{algorithm: theme.darkAlgorithm}}>
      <Router>
        <Layout style={{
          overflow: 'hidden',
          width: '100%',
          maxWidth: '100%',
          backgroundColor: '#202020',
          minHeight: '100vh'
        }}>
          <Layout.Header style={{
            backgroundColor: 'rgba(0, 0, 0, 0.3)',
            backdropFilter: 'blur(10px)',
            position: 'sticky',
            top: 0,
            zIndex: 100,
            padding: 0,
            height: 'auto',
            minHeight: '64px'
          }}>
            <HeaderBar />
          </Layout.Header>
          <Layout.Content style={{
            textAlign: 'center',
            color: '#fff',
            minHeight: 'calc(100vh - 64px)'
          }}>
            <Routes>
              <Route path="/" element={<Home />} />
              <Route path="/unlock" element={<Unlock />} />
              <Route path="/about" element={<About />} />
              <Route path="/resource" element={<Resource />} />
            </Routes>
          </Layout.Content>
        </Layout>
      </Router>
    </ConfigProvider>
  );
};

export default App;